import React from 'react';
import { View, Text, StyleSheet, Image, TouchableOpacity, ScrollView } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { useNavigation } from '@react-navigation/native';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';

type RootStackParamList = {
  Main: undefined;
  Yve: undefined;
  Tixin: undefined;
  Hui: undefined;
  Fuwu: undefined;
  Youhui: undefined;
};

type NavigationProp = NativeStackNavigationProp<RootStackParamList>;

interface MenuItemProps {
  icon: string;
  title: string;
  rightText?: string;
  onPress?: () => void;
}

const ProfileScreen = () => {
  const navigation = useNavigation<NavigationProp>();

  const userInfo = {
    name: '张家核桃仁',
    phone: '17744331126',
    memberDays: 365,
    balance: '¥1256.00',
    level: '白银会员'
  };

  const balanceInfo = {
    total: 5188.58,
    frozen: 1188.58,
    available: 4188.58
  };

  const MenuItem: React.FC<MenuItemProps> = ({ icon, title, rightText, onPress }) => (
    <TouchableOpacity style={styles.menuItem} onPress={onPress}>
      <View style={styles.menuLeft}>
        <Icon name={icon} size={24} color="#666" />
        <Text style={styles.menuTitle}>{title}</Text>
      </View>
      <View style={styles.menuRight}>
        {rightText && <Text style={styles.menuRightText}>{rightText}</Text>}
        <Icon name="chevron-right" size={24} color="#999" />
      </View>
    </TouchableOpacity>
  );

  const handleMenuPress = (title: string) => {
    switch (title) {
      case '我的会员':
        navigation.navigate('Hui');
        break;
      case '我的服务券':
        navigation.navigate('Fuwu');
        break;
      case '我的优惠券':
        navigation.navigate('Youhui');
        break;
      default:
        break;
    }
  };

  const handleWithdraw = () => {
    navigation.navigate('Yve');
  };
  const handleWithdra = () => {
    navigation.navigate('Tixin');
  };

  return (
    <ScrollView style={styles.container}>
      {/* 用户信息区域 */}
      <View style={styles.userInfoContainer}>
        <View style={styles.userBasicInfo}>
          <Image
            style={styles.avatar}
            source={require('./assets/1.jpg')}
          />
          <View style={styles.userTextInfo}>
            <Text style={styles.userName}>{userInfo.name}</Text>
            <Text style={styles.userPhone}>{userInfo.phone}</Text>
            <Text style={styles.memberDays}>您已加入万枫酒店{userInfo.memberDays}天</Text>
            <TouchableOpacity onPress={handleWithdraw}>
              <Text style={[styles.balance, styles.balanceClickable]}>余额 {userInfo.balance}</Text>
            </TouchableOpacity>
          </View>
        </View>
        <View style={styles.rightContainer}>
          <View style={styles.memberBadge}>
            <Text style={styles.memberLevel}>{userInfo.level}</Text>
          </View>
          <View style={styles.iconContainer}>
            <TouchableOpacity style={styles.iconButton}>
              <Icon name="qr-code" size={20} color="#fff" />
            </TouchableOpacity>
            <TouchableOpacity style={styles.iconButton}>
              <Icon name="person" size={20} color="#fff" />
            </TouchableOpacity>
          </View>
        </View>
      </View>

      {/* 余额信息区域 */}
      <View style={styles.balanceContainer}>
        <View style={styles.balanceItem}>
          <Text style={styles.balanceAmount}>{balanceInfo.total}</Text>
          <Text style={styles.balanceLabel}>我的资金</Text>
        </View>
        <View><Text style={{ color: '#ffffff', fontSize: 25 }}>|</Text></View>
        <View style={styles.balanceItem}>
          <Text style={styles.balanceAmount}>{balanceInfo.frozen}</Text>
          <Text style={styles.balanceLabel}>冻结中</Text>
        </View>
        <View><Text style={{ color: '#ffffff', fontSize: 25 }}>|</Text></View>
        <TouchableOpacity style={styles.balanceItem} onPress={handleWithdra}>
          <Text style={styles.balanceAmount}>{balanceInfo.available}</Text>
          <Text style={styles.balanceLabel}>可提现</Text>
        </TouchableOpacity>
      </View>

      {/* 功能菜单列表 */}
      <View style={styles.menuContainer}>
        <MenuItem icon="receipt" title="我的订单" onPress={() => handleMenuPress("我的订单")} />
        <MenuItem icon="people" title="我的会员" rightText="共 36 人" onPress={() => handleMenuPress("我的会员")} />
        <MenuItem icon="card-giftcard" title="我的服务券" onPress={() => handleMenuPress("我的服务券")} />
        <MenuItem icon="local-offer" title="我的优惠券" rightText="共 8 张可用" onPress={() => handleMenuPress("我的优惠券")} />
        <MenuItem icon="event" title="我的活动" onPress={() => handleMenuPress("我的活动")} />
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  userInfoContainer: {
    backgroundColor: '#394867',
    padding: 20,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  userBasicInfo: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  avatar: {
    width: 60,
    height: 60,
    borderRadius: 30,
    marginRight: 15,
  },
  userTextInfo: {
    justifyContent: 'center',
  },
  userName: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 4,
    color: '#ffffff',
  },
  userPhone: {
    fontSize: 14,
    color: '#ffffff',
    marginBottom: 4,
    opacity: 0.9,
  },
  memberDays: {
    fontSize: 12,
    color: '#ffffff',
    marginBottom: 4,
    opacity: 0.8,
  },
  balance: {
    fontSize: 12,
    color: '#ffffff',
    opacity: 0.8,
  },
  rightContainer: {
    alignItems: 'flex-end',
  },
  memberBadge: {
    backgroundColor: 'rgba(255, 255, 255, 0.2)',
    padding: 8,
    borderRadius: 15,
    marginBottom: 10,
  },
  memberLevel: {
    fontSize: 12,
    color: '#ffffff',
  },
  balanceContainer: {
    flexDirection: 'row',
    backgroundColor: '#464a56',
    marginTop: 10,
    padding: 15,
  },
  balanceItem: {
    flex: 1,
    alignItems: 'center',
  },
  balanceAmount: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 4,
    color: '#ffffff',
  },
  balanceLabel: {
    fontSize: 12,
    color: '#ffffff',
    opacity: 0.8,
  },
  menuContainer: {
    backgroundColor: '#fff',
    marginTop: 10,
  },
  menuItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  menuLeft: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  menuTitle: {
    marginLeft: 10,
    fontSize: 16,
  },
  menuRight: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  menuRightText: {
    fontSize: 14,
    color: '#999',
    marginRight: 5,
  },
  iconContainer: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
  },
  iconButton: {
    width: 32,
    height: 32,
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 15,
  },
  balanceClickable: {
    textDecorationLine: 'underline',
  },
});

export default ProfileScreen; 